<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="6" :sm="24">
                <a-form-item label="支出类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请输入支出类别" v-model="queryParam.source" :dropdownMatchSelectWidth="false"
                    showSearch optionFilterProp="children">
                    <a-select-option v-for="(item, index) in operatorList" :key="index" :value="item.name">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="接收用户" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入接收用户模糊查询" v-model="queryParam.receivee"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="业务员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择查询的业务员" v-model.number="queryParam.ope"
                    :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children">
           <a-select-option v-for="(item,index) in opeList" :key="index" :value="item.name" >{{ item.name }}</a-select-option>

                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <!-- <a-col :md="6" :sm="24">
                <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="输入手机号码模糊查询" maxLength="11" v-model="queryParam.tel"></a-input>
                </a-form-item>
              </a-col> -->
              <a-col :md="6" :sm="24">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
        <div>
          <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
            :pagination="ipagination" :loading="loading" @change="handleTableChange"
            >
            <!-- :scroll="{ x: 1700}" -->
            <span slot="action" slot-scope="text, record">
              <a @click="myHandleDetail(record)">详情</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">编辑</a>
              <!-- <a-divider  v-if="btnEnableList.indexOf(6)>-1"  type="vertical"/> -->
              <!-- <a  v-if="btnEnableList.indexOf(6)>-1"  @click="handleProduce(record)">下单</a> -->
              <a-divider  type="vertical" />
              <a-popconfirm  title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>

            </span>
          </a-table>
        </div>
        <!-- table区域-end -->
        <ExpenditureModal @save="save" ref="modalForm" @ok="modalFormOk"></ExpenditureModal>
        <CustomListDetail ref="CustomListDetail"></CustomListDetail>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import ExpenditureModal from './modules/ExpenditureModal'
import CustomListDetail from './dialog/CustomListDetail'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import { getConfigOperatorList ,getAllListIncome} from '../../api/api'
export default {
  name: "/CustomList",
  mixins: [JeecgListMixin],
  components: {
    ExpenditureModal,
    CustomListDetail,
    JInput
  },
  data() {
    return {
      labelCol: {
        span: 5
      },
      opeList:[],
      wrapperCol: {
        span: 18,
        offset: 1
      },
      operatorList:[],
      typeList: [],
      queryParam: {},
      credit_options: ["风险", "正常", "优秀", "极好", "黑名单"],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        { title: '支出类别', dataIndex: 'type', width: 90, align: "center" },
        { title: '支出账户', dataIndex: 'account', width: 120, align: "center" },
        { title: '金额', dataIndex: 'amount', width: 80, align: "center" },
        { title: '业务员', dataIndex: 'ope', width: 90, align: "center" },
        { title: '接收用户', dataIndex: 'receivee', width: 90, align: "center" },
        { title: '备注', dataIndex: 'remark', width: 90, align: "center" },
        { title: '用途', dataIndex: 'purpose', width: 170, align: "center"},
        { title: '生成时间', dataIndex: 'updateTimeStr', width: 120, align: "center" },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
          width: 170
        }
      ],
      url: {
        list: "/expenditure/list",
        delete: "/expenditure/delete",
      },
    }
  },

    mounted(){
      this.getIncomeConfig()
      this.getOpe()
  },
  methods: {
    // 获取收入/支出配置
    getIncomeConfig(){
      console.log('res');
      getAllListIncome({
          type:'支出'
      }).then(res => {
        this.operatorList.splice(0,this.operatorList.length,...res.data.operatorList)
        console.log(this.operatorList,'res1');
      })
    },
    getOpe(){
        let that = this;
      getConfigOperatorList({}).then((res)=>{
        if(res) {
          res.data.operatorList.forEach(item => {
            item.value = item.name;
            item.title = item.name;
          })
          that.opeList = res.data.operatorList;
        }
      });
      },
    myHandleDetail(record) {
      this.$refs.modalForm.show(record);
      this.$refs.modalForm.title = "详情";
    },
    searchQuery() {
      this.loadData(1);
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1);
    },
    save() {
      this.loadData(1)
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
      if (this.btnEnableList.indexOf(1) > -1) {
        this.$refs.modalForm.isReadOnly = true
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>